<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>欢迎页面</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
</head>
<body>
<h1>登录成功，欢迎您 ${sessionScope.user.name}</h1>
<h1>${requestScope.msg}</h1>
<a href="${pageContext.request.contextPath}/toAdd" class="btn btn-primary">添加用户</a>

<%--搜索用户--%>
<form action="${pageContext.request.contextPath}/search" method="post">
    <input class="input-lg" type="text" name="name" placeholder="请输入要搜索的名字">
    <button type="submit" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search"></span></button>
</form>

<%--页面显示用户列表--%>
<table class="table table-striped">
    <tr>
        <td>ID</td>
        <td>名字</td>
        <td>性别</td>
        <td>出生日期</td>
        <td>注册日期</td>
        <td>操作</td>
    </tr>
    <c:forEach items="${requestScope.pageInfo.list}" var="user">
        <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
            <td>${user.sex}</td>
                <%--fmt标签格式化日期 pattern指定日期格式--%>
            <td><fmt:formatDate pattern="yyyy年MM月dd日" value="${user.birthday}"/></td>
            <td><fmt:formatDate pattern="yyyy年MM月dd日" value="${user.registTime}"/></td>
            <td>
                <a href="${pageContext.request.contextPath}/toUpdate/${user.id}" class="btn btn-info">修改</a>&nbsp;
                <a href="${pageContext.request.contextPath}/delete/${user.id}" class="btn btn-info">删除</a>
            </td>
        </tr>
    </c:forEach>
</table>
<ul class="pager">
    <%--显示上一页--%>
    <c:if test="${requestScope.pageInfo.hasPreviousPage}">
        <li><a href="${pageContext.request.contextPath}/page/${num -1}">&lt;</a></li>
    </c:if>

    <c:forEach items="${requestScope.pageInfo.navigatepageNums}" var="num">
        <%-- 完成分页页码的超链接 --%>
        <li><a href="${pageContext.request.contextPath}/page/${num}">${num}</a></li>
    </c:forEach>

    <%--显示下一页--%>
    <c:if test="${requestScope.pageInfo.hasNextPage}">
        <li><a href="${pageContext.request.contextPath}/page/${num +1}">&gt;</a></li>
    </c:if>
</ul>

<hr/>
<c:forEach items="${requestScope.fileNames}" var="file">
    <a href="${pageContext.request.contextPath}/upload/${file}">${file}</a>&nbsp;&nbsp;
    <a href="${pageContext.request.contextPath}/download?filename=${file}">下载</a>
    <br/>
</c:forEach>

<hr/>
<button id="mybtn1" class="btn btn-info">查询所有</button>
<button id="mybtn2" class="btn btn-info">查询单个</button>
<button id="mybtn3" class="btn btn-info">新增</button>
<button id="mybtn4" class="btn btn-info">修改</button>
<button id="mybtn5" class="btn btn-info">删除</button>

<script>
    $(function () {
        // 演示查询所有用户
        $("#mybtn1").click(function () {
            // 发送ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/users",
                type: "get",
                contentType: "application/json",
                success: function (res) {
                    console.log(res);
                }
            });
        });
        //演示查询单个用户
        $("#mybtn2").click(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/users/1",
                type: "get",
                contentType: "application/json",
                success: function (res) {
                    console.log(res);
                }
            });
        });
        // 演示新增用户
        $("#mybtn3").click(function () {
            // 发送ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/users",
                type: "post",
                data: JSON.stringify({id: 10, username: "王仁康", password: "1111"}),
                contentType: "application/json",
                success: function (res) {
                    console.log(res);
                }
            });
        });
        //演示修改用户
        $("#mybtn4").click(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/users",
                type: "put",
                data: JSON.stringify({id: 10, username: "王仁康", password: "1111"}),
                contentType: "application/json",
                success: function (res) {
                    console.log(res);
                }
            });
        });
        // 演示删除用户
        $("#mybtn5").click(function () {
            // 发送ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/users/1",
                type: "delete",
                contentType: "application/json",
                success: function (res) {
                    console.log(res);
                }
            });
        });
    });
</script>
</body>
</html>
